<template>
    <div class="home-m-view no-scrollbar">
        <div class="head">
            <Head></Head>
        </div>
        <HeadDate></HeadDate>
        <Search
            :themeMode="themeMode">
        </Search>
        <WebsiteList
            :userWebsiteList="dataList"
            :themeMode="themeMode">
        </WebsiteList>
        <ImgBgCp
            :imgUrl="author.bgimg"
            :showMask="imgBgMode">
        </ImgBgCp>
    </div>
</template>

<script>
/*
 手机首页页面
 */
import Head from "@/components/public/Head";
import Search from "./components/Search";
import HeadDate from "./components/HeadDate";
import WebsiteList from "./components/WebsiteList";
import ImgBgCp from "@/components/public/ImgBg";
import {getThemeColor} from"@/common/ImgThemeColor";
import {isLight,sortUserWebsiteList} from"@/common/Tools";
export default {
    name: 'HomeM',
    components: {
        Head,
        HeadDate,
        Search,
        WebsiteList,
        ImgBgCp,
    },
    data(){
        return {
            author:{},  //当前显示的是那个用户/作者
        };
    },
    computed:{
        imgBgMode(){  //全局公共的背景图模式
            return this.$store.state.public.imgBgMode;
        },
        user(){  //当前登录用户
            return this.$store.state.user.user;
        },
        dataList(){  //当前显示的网站列表数据
            //如果当前用户登陆了则返回登录用户的数据，否则返回推荐数据
            return this.user.name?this.userWebsiteList:this.indexUserWebsiteList;
        },
        indexUserWebsiteList:{  //首页的用户网站列表
            get(){
                return this.$store.state.index.userWebsiteList;
            },
            set(newValue){
                this.$store.commit('index/setUserWebsiteList',newValue);
            },
        },
        userWebsiteList(){  //当前登录用户网站列表
            return this.$store.state.user.userWebsiteList;
        },
        bgImgThemeMode:{  //当前页的主题模式
            get(){
                return this.$store.state.index.bgImgThemeMode;
            },
            set(newValue){
                this.$store.commit('index/setBgImgThemeMode',newValue);
            },
        },
        logoShow(){
            return this.$store.state.config.logoShow;;
        },
        logoTitle(){
            return this.$store.state.config.logoTitle;;
        },
        weatherShow(){
            return this.$store.state.config.weatherShow;;
        },
        footerShow(){
            return this.$store.state.config.footerShow;;
        },
        websiteContainerWidth(){
            return this.$store.state.config.websiteContainerWidth;
        },
        difinedThemeMode(){
            return this.$store.state.config.difinedThemeMode;;
        },
        configThemeMode(){
            return this.$store.state.config.themeMode;;
        },
        themeMode(){  //计算该显示配置的主题还是图片的主题
            return this.difinedThemeMode?this.configThemeMode:this.bgImgThemeMode;
        }
    },
    watch:{
        user:{  //没有用户登录的话获取推荐的数据
            handler(newValue){
                if(!newValue.name){
                    this.getRecommendUserWebsiteList();
                }else{
                    this.author = newValue;
                }
            },
            immediate:true,
        },
        author:{
            handler(newValue){  //当作者被确定后就获取当前主题模式 暗，浅
                getThemeColor(  //获取主题色
                    newValue.bgimg,
                ).then(themeColor=>{
                    this.bgImgThemeMode = isLight(themeColor) ? 'white':'black';
                }).catch(()=>{
                    this.bgImgThemeMode = 'black';
                });
            },
            immediate:true,
        },
    },
    methods:{
        getRecommendUserWebsiteList(){ //当没有用户登录时获取推荐用户的数据
            this.$Api.getUserWebsites(
                {
                    userName:"recommend",
                },
            ).then((data)=>{
                this.indexUserWebsiteList = sortUserWebsiteList(data.userWebsiteList,data.config.order);
                this.author = data.user;
            });
        },
    },
}
</script>

<style scoped lang="scss">
.home-m-view{
    width: 100%;
    height: var(--clientHeight,100vh);
    overflow: auto;
    display: grid;
    grid-gap: 30px;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box;
    >.head{
        height: 50px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        transition: opacity 0.2s;
        box-sizing: border-box;
        box-shadow: 0 0 6px rgba(0,0,0,0.15);
        z-index: 999;
        &:hover{
            opacity: 1;
        }
    }
}
</style>
